<template id="temp">
  <!-- vue实例外创建 -->
  <div>
    <el-row :gutter="12">
      <el-col :span="6">
        <el-card :body-style="{ padding: '0px' }" style="height: 500px">
          <el-col style="padding: 14px; font-weight: bold" :offset="2">
            <p>组卷方式: {{ examPaperList.groupMethod }}</p>
            <p>
              试卷名称: <span class="active">{{ examPaperList.paperName }}</span>
            </p>
            <p>
              试卷用途: <span class="active">{{ examPaperList.usefor }}</span>
            </p>
            <p>
              试题总数: <span class="active">{{ sumQuestion }}</span>
            </p>
            <p>
              试卷总分: <span class="active">{{ sumScoreOfPaper }}</span>
            </p>
          </el-col>
          <el-col style="padding: 14px; font-weight: bold" :offset="3">
            <el-button type="primary" style="width: 75%" @click="savePaper()"
              >返回</el-button
            >
          </el-col>
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card :body-style="{ padding: '0px' }">
          <div style="padding: 14px">
            <div style="font-weight: bold; font-size: 22px">题目列表</div>

            <!-- 展示数据 -->
            <el-row
              type="flex"
              justify="center"
              :gutter="24"
              style="padding: 14px; margin: 0"
            >
              <!-- 单选题 -->
              <el-card shadow="always" :body-style="{ padding: '20px' }">
                <!-- 展示添加题目列表 -->
                <el-row
                  :gutter="24"
                  justify="center"
                  align="middle"
                  style="margin: 0px"
                >
                  <el-col :span="6" style="font-weight: bold; padding: 14px">
                    <el-input
                      style="width: 200px"
                      placeholder="题目类型"
                      value="单选题"
                      :disabled="true"
                    >
                    </el-input>
                  </el-col>
                </el-row>
                <!-- 以下，是已添加到试卷中的题目 -->
                <el-row
                  type="flex"
                  justify="center"
                  :gutter="24"
                  v-for="(item, index) in radioQues"
                  :key="index"
                >
                  <el-col :span="20">
                    <p style="font-weight: bold">
                      {{ index + 1 }}.{{ item.question }}
                    </p>
                    <!-- 根据题型的不同显示不同的答案样式 -->
                    <ul
                      v-if="item.type == '单选题'"
                      style="list-style-type: upper-alpha"
                    >
                      <li
                        v-for="(answer, index) in item.questionOption"
                        :key="index"
                        :class="{ active: answer.rightAnswer === 'y' }"
                      >
                        {{ answer.context }}
                      </li>
                    </ul>
                  </el-col>
                </el-row>

                <!-- card body -->
              </el-card>
              <!-- 多选题 -->
              <el-card shadow="always" :body-style="{ padding: '20px' }">
                <!-- 展示添加题目列表 -->
                <el-row
                  :gutter="24"
                  justify="center"
                  align="middle"
                  style="margin: 0px"
                >
                  <el-col :span="6" style="font-weight: bold; padding: 14px">
                    <el-input
                      style="width: 200px"
                      placeholder="题目类型"
                      value="多选题"
                      :disabled="true"
                    >
                    </el-input>
                  </el-col>
                </el-row>
                <!-- 以下，是已添加到试卷中的题目 -->
                <el-row
                  type="flex"
                  justify="center"
                  :gutter="24"
                  v-for="(item, index) in checkQues"
                  :key="index"
                >
                  <el-col :span="20">
                    <p style="font-weight: bold">
                      {{ index + 1 }}.{{ item.question }}
                    </p>
                    <!-- 根据题型的不同显示不同的答案样式 -->
                    <ul
                      v-if="item.type == '多选题'"
                      style="list-style-type: upper-alpha"
                    >
                      <li
                        v-for="(answer, index) in item.questionOption"
                        :key="index"
                        :class="{ active: answer.rightAnswer === 'y' }"
                      >
                        {{ answer.context }}
                      </li>
                    </ul>
                  </el-col>
                </el-row>
                <!-- card body -->
              </el-card>
              <!-- 判断题 -->
              <el-card shadow="always" :body-style="{ padding: '20px' }">
                <!-- 展示添加题目列表 -->
                <el-row
                  :gutter="24"
                  justify="center"
                  align="middle"
                  style="margin: 0px"
                >
                  <el-col :span="6" style="font-weight: bold; padding: 14px">
                    <el-input
                      style="width: 200px"
                      placeholder="题目类型"
                      value="判断题"
                      :disabled="true"
                    >
                    </el-input>
                  </el-col>
                </el-row>
                <!-- 以下，是已添加到试卷中的题目 -->
                <el-row
                  type="flex"
                  justify="center"
                  :gutter="24"
                  v-for="(item, index) in rightQues"
                  :key="index"
                >
                  <el-col :span="20">
                    <p style="font-weight: bold">
                      {{ index + 1 }}.{{ item.question }}
                    </p>
                    <!-- 根据题型的不同显示不同的答案样式 -->
                    <ul
                      style="list-style-type: none"
                      v-if="item.questionOption[0].rightAnswer == 'y'"
                    >
                      <li style="color: aqua">A.正确</li>
                      <li>B.错误</li>
                    </ul>
                    <ul
                      style="list-style-type: none"
                      v-if="item.questionOption[0].rightAnswer == 'n'"
                    >
                      <li>A.正确</li>
                      <li style="color: aqua">B.错误</li>
                    </ul>
                  </el-col>
                </el-row>
                <!-- card body -->
              </el-card>
              <!-- 填空题 -->
              <el-card shadow="always" :body-style="{ padding: '20px' }">
                <!-- 展示添加题目列表 -->
                <el-row
                  :gutter="24"
                  justify="center"
                  align="middle"
                  style="margin: 0px"
                >
                  <el-col :span="6" style="font-weight: bold; padding: 14px">
                    <el-input
                      style="width: 200px"
                      placeholder="题目类型"
                      value="填空题"
                      :disabled="true"
                    >
                    </el-input>
                  </el-col>
                </el-row>
                <!-- 以下，是已添加到试卷中的题目 -->
                <el-row
                  type="flex"
                  justify="center"
                  :gutter="24"
                  v-for="(item, index) in completionQues"
                  :key="index"
                >
                  <el-col :span="20">
                    <p style="font-weight: bold">
                      {{ index + 1 }}.{{ item.question }}
                    </p>
                    <!-- 根据题型的不同显示不同的答案样式 -->
                    <!-- 填空题 -->
                    <ul
                      v-if="item.type == '填空题'"
                      style="list-style-type: none"
                    >
                      <li>答：{{ item.questionOption[0].context }}</li>
                    </ul>
                  </el-col>
                </el-row>
                <!-- card body -->
              </el-card>
              <!-- 问答题 -->
              <el-card shadow="always" :body-style="{ padding: '20px' }">
                <!-- 展示添加题目列表 -->
                <el-row
                  :gutter="24"
                  justify="center"
                  align="middle"
                  style="margin: 0px"
                >
                  <el-col :span="6" style="font-weight: bold; padding: 14px">
                    <el-input
                      style="width: 200px"
                      placeholder="题目类型"
                      value="简答题"
                      :disabled="true"
                    >
                    </el-input>
                  </el-col>
                </el-row>
                <!-- 以下，是已添加到试卷中的题目 -->
                <el-row
                  type="flex"
                  justify="center"
                  :gutter="24"
                  v-for="(item, index) in shortQues"
                  :key="index"
                >
                  <el-col :span="20">
                    <p style="font-weight: bold">
                      {{ index + 1 }}.{{ item.question }}
                    </p>
                    <!-- 根据题型的不同显示不同的答案样式 -->
                    <!-- 问答题 -->
                    <ul
                      v-if="item.type == '简答题'"
                      style="list-style-type: none"
                    >
                      <li>答：{{ item.questionOption[0].context }}</li>
                    </ul>
                  </el-col>
                </el-row>
                <!-- card body -->
              </el-card>
            </el-row>

          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>


<!-- 调用   <mycom></mycom> -->
<script>
export default {
  name: "paperAdd",
  data() {
    return {
      value: "",
      dialogTableVisible: false,
      dialogFormVisible: false,
      // 试题总数
      sumQuestion: 0,
      // 试卷总分
      sumScoreOfPaper: 0,
      // 题目列表
      questionList: [],
      // 题库列表
      libraryList: [],
      // 添加的题目数据，
      multipleSelection: [],
      // 试卷上的题目数据，准备出现在试卷上的题目
      paperQuestionList: [],
      // 单选题
      radioQues: [],
      // 多选题
      checkQues: [],
      // 判断题
      rightQues: [],
      // 填空题
      completionQues: [],
      // 简答题
      shortQues: [],
      // 存所有题目id
      quesIdList: [],
      // 要修改的试卷基本信息
      examPaperList: {},
      // 试卷内容数据
      paperContent: {
        id: "",
        paperName: "", //试卷名称
        groupMethod: "", //组卷方式
        usefor: "", //用途
        url: "", //预览地址
        hasShortAnswer: 0, //是否有问答题
        totalGrade1: 0, //单选总分数
        totalGrade2: 0, //多选总分数
        totalGrade3: 0, //判断总分数
        totalGrade4: 0, //	填空总分数
        totalGrade5: 0, //	简答总分数
        defaultGrade1: 6, //	单选默认分数
        defaultGrade2: 6, //	多选默认分数
        defaultGrade3: 6, //	判断默认分数
        defaultGrade4: 6, //	填空默认分数
        defaultGrade5: 20, //简答默认分数
        nums1: 0, //	单选题数
        nums2: 0, //	多选题数
        nums3: 0, //	判断题数
        nums4: 0, //	填空题数
        nums5: 0, //	简答题数
        // creatorId: "", //	创建者
        createTime: "", //	创建时间
        updateTime: "", //	更新时间
        // isdel: "", //	是否被弃用
      },
      // 试卷对象
      paperObject: {
        id: "",
        paperName: "",
        groupMethod: "",
        usefor: "",
      },
    };
  },
  methods: {
    // 集合去重
    noRepeat(arr) {
      const res = new Map(); //定义常量 res,值为一个Map对象实例
      //返回arr数组过滤后的结果，结果为一个数组   过滤条件是，如果res中没有某个键，就设置这个键的值为1
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
    },
    // 题目排序
    sortQues() {
      // 给大集合排序
      this.paperQuestionList = [];
      if (this.radioQues != null && this.radioQues != "") {
        this.radioQues.forEach((paper) => {
          this.paperQuestionList.push(paper);
        });
      } else if (this.checkQues != null && this.checkQues != "") {
        this.checkQues.forEach((paper) => {
          this.paperQuestionList.push(paper);
        });
      } else if (this.rightQues != null && this.rightQues != "") {
        this.rightQues.forEach((paper) => {
          this.paperQuestionList.push(paper);
        });
      } else if (this.completionQues != null && this.completionQues != "") {
        this.completionQues.forEach((paper) => {
          this.paperQuestionList.push(paper);
        });
      } else if (this.shortQues != null && this.shortQues != "") {
        this.shortQues.forEach((paper) => {
          this.paperQuestionList.push(paper);
        });
      }
      this.paperQuestionList = this.noRepeat(this.paperQuestionList);
      this.getQuestionId(); // 获取所有题目id
    },
    // 计算试卷内容属性
    countPaper() {
      // 计算
      // 先重置数据
      this.radioQues = [];
      this.checkQues = [];
      this.rightQues = [];
      this.completionQues = [];
      this.shortQues = [];
      this.sumQuestion = 0;
      this.sumScoreOfPaper = 0;
      this.paperContent.nums1 = 0;
      this.paperContent.nums2 = 0;
      this.paperContent.nums3 = 0;
      this.paperContent.nums4 = 0;
      this.paperContent.nums5 = 0;
      this.paperContent.totalGrade1 = 0;
      this.paperContent.totalGrade2 = 0;
      this.paperContent.totalGrade3 = 0;
      this.paperContent.totalGrade4 = 0;
      this.paperContent.totalGrade5 = 0;
      this.paperQuestionList.forEach((paper) => {
        if (paper.type === "单选题") {
          this.sumQuestion++; // 总题数
          this.paperContent.nums1++;
          this.radioQues.push(paper);
        }
        if (paper.type === "多选题") {
          this.sumQuestion++; // 总题数
          this.paperContent.nums2++;
          this.checkQues.push(paper);
        }
        if (paper.type === "判断题") {
          this.sumQuestion++; // 总题数
          this.paperContent.nums3++;
          this.rightQues.push(paper);
        }
        if (paper.type === "填空题") {
          this.sumQuestion++; // 总题数
          this.paperContent.nums4++;
          this.completionQues.push(paper);
        }
        if (paper.type === "简答题") {
          this.sumQuestion++; // 总题数
          this.paperContent.hasShortAnswer = 1;
          this.paperContent.nums5++;
          this.shortQues.push(paper);
        }
      });
      // this.sortQues();
      this.paperContent.totalGrade1 =
        this.paperContent.nums1 * this.paperContent.defaultGrade1;
      this.paperContent.totalGrade2 =
        this.paperContent.nums2 * this.paperContent.defaultGrade2;
      this.paperContent.totalGrade3 =
        this.paperContent.nums3 * this.paperContent.defaultGrade3;
      this.paperContent.totalGrade4 =
        this.paperContent.nums4 * this.paperContent.defaultGrade4;
      this.paperContent.totalGrade5 =
        this.paperContent.nums5 * this.paperContent.defaultGrade5;
      // 总分
      this.sumScoreOfPaper =
        this.paperContent.totalGrade1 +
        this.paperContent.totalGrade2 +
        this.paperContent.totalGrade3 +
        this.paperContent.totalGrade4 +
        this.paperContent.totalGrade5;
    },
    // 获取所有题目id
    getQuestionId() {
      this.paperQuestionList.forEach((ques) => {
        this.quesIdList.push(ques.id);
      });
      // console.log(this.quesIdList);
    },
    // 保存试卷
    savePaper() {
        this.$router.push({ path: "/paper/paperList" });
    },
    // 以上为添加
    // ======================================================================
    // ======================================================================
    // 以下为修改
    // 查询当前试卷所有的题目
    findQuestionByPaperId(id) {
      localStorage.removeItem("paper");
      this.paperContent.id = id;
      this.$axios
        .get("/api/question/findQuestionByPaperId", { params: { id: id } })
        .then((res) => {
          res.data.data.forEach((val) => {
            this.paperQuestionList.push(val);
          });
          this.countPaper(); // 计算试卷内容属性
        })
        .catch((err) => {
          this.paperQuestionList = [];
          return;
        });
    },

    // ======================================================================
    // ======================================================================
    // ======================================================================
    // 工具方法
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageparm.pageSize = val;
      this.opt(this.searchData.ent.type);
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.pageparm.currentPage = val;
      this.opt(this.searchData.ent.type);
    },
    handleSelectionChange(val) {
      // console.log(val);
      this.multipleSelection = [];
      val.forEach((v) => {
        this.multipleSelection.push(v);
      });
    },
  },
  // 局部过滤器
  filters: {
    dateFormat(str, pattern = "") {
      let date = new Date(str);
      let year = date.getFullYear();
      let month = date.getMonth();
      let day = date.getDate();
      if (pattern.toLowerCase() == "yyyy-mm-dd") {
        return `${year}-${month}-${day}`;
      } else {
        let hour = date.getHours();
        let m = date.getMinutes();
        let s = date.getSeconds();

        return `${year}-${month}-${day} ${hour}:${m}:${s}`;
      }
    },
  },
  mounted() {
    this.examPaperList = JSON.parse(localStorage.getItem("paper"));
    this.findQuestionByPaperId(this.examPaperList.id);
  },
};
</script>



<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.el-row {
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
}
#bg {
  background: #eaeaea;
}
.el-card {
  min-width: 100%;
  height: 100%;
  margin-right: 20px;
  transition: all 0.5s;
}

.active {
  color: #409eff;
}

/* ======================================= */
</style>
